import { useForm } from 'react-hook-form';
import { useDispatch } from 'react-redux';
import Button from 'src/component/Button';
import Form from 'src/component/Form';
import FormInput from 'src/component/FormInput';
import Modal from 'src/component/Modal';
import { openSnackbar, finishWaiting, startWaiting } from 'src/redux/uiSlice';
import axios from 'axios';
import style from './ResetPasswordModal.module.scss';
import { editPwd } from 'src/service/userService'
type ResetPasswordForm = {
    password: string,
    newPassword: string,
    confirmPassword: string,
}

type Props = {
    open: boolean;
    handleClose: () => void;
};

const ResetPasswordModal = ({ open, handleClose }: Props) => {
    const dispatch = useDispatch();
    const resetPasswordForm = useForm<ResetPasswordForm>();

    const onResetPasswordFormSubmit = (formData: ResetPasswordForm) => {
        if (formData.newPassword !== formData.confirmPassword) {
            resetPasswordForm.setError('confirmPassword', {}, { shouldFocus: true });
            return;
        }
        const uMail = localStorage.getItem("uMail")
        const token = localStorage.getItem("token")
        resetPasswordForm.reset();
        handleClose();

        editPwd({
            token: token,
            uMail: uMail,
            uPwd: formData.password,
            newPwd: formData.newPassword,
        }).then((res) => {
            if (res.success) {
                dispatch(openSnackbar({ message: res.message, severity: 'notify' }))
            } else {
                dispatch(openSnackbar({ message: res.message, severity: 'alert' }))
            }
        }).catch(e => {
            dispatch(openSnackbar({ message: e, severity: 'alert' }))
        })

    };

    return (
        <Modal open={open} handleClose={handleClose}>
            <Form className={style.self} methods={resetPasswordForm} onSubmit={onResetPasswordFormSubmit}>
                <div className={style.heading}>变更密码</div>
                <div className={style.labelInput}>
                    <FormInput
                        label="当前密码"
                        name="password"
                        type="password"
                        required
                        asterisked
                    />
                </div>
                <div className={style.codeInput}>
                    <FormInput
                        label="新密码"
                        name="newPassword"
                        type="password"
                        required
                        asterisked
                    />
                </div>
                <div className={style.codeInput}>
                    <FormInput
                        label="确认密码"
                        name="confirmPassword"
                        type="password"
                        required
                        asterisked
                    />
                </div>
                <div className={style.submitButton}>
                    <Button type="submit">送出</Button>
                </div>
            </Form>
        </Modal>
    );
};

export default ResetPasswordModal;
